<template>
	<view class="container">
		<!-- 基本信息 -->
		<view class="foundation">基本信息</view>
		<!-- 产品信息集合 -->
		<view class="content">
			<view class="block">
				<view>生产单号</view>
				<view style="color: #999999;">{{list.no || '暂无'}}</view>
			</view>
			<view class="block">
				<view>生产状态</view>
				<view style="color: #FBA349;">
					<span v-if="list.status / 10==''">无</span>
					<span v-if="list.status / 10==1">待生产</span>
					<span v-if="list.status / 10==2">生产中</span>
					<span v-if="list.status / 10==3">已完成</span>
				</view>
			</view>
			<view class="block">
				<view>关联BOM单号</view>
				<view style="color: #177A77;">{{list.bomId}}</view>
			</view>
			<!-- <view class="block">
				<view>生产单货品</view>
				<view style="color: #999999;">大白菜</view>
			</view> -->
			<view class="block">
				<view>生产类型</view>
				<view style="color: #999999;">
					<span v-if="list.type==1">组合</span>
					<span v-if="list.type==2">拆分</span>
					<span v-if="list.type==3">已完成</span>
				</view>
			</view>
			<view class="block">
				<view>预加工数</view>
				<view style="color: #999999;">{{list.estimatedCount}}</view>
			</view>
			<!-- <view class="block">
				<view>创建人员</view>
				<view style="color: #999999;">张三哈</view>
			</view> -->
			<view class="block" style="border-bottom: none;">
				<view>生产单日期</view>
				<view style="color: #999999;">{{list.createTime?handleSetTime(list.createTime):''}}</view>
			</view>
		</view>
		<!-- 领料种类 -->
		<view class="foundation">
			<span>领料种类（共</span>
			<span style="color: #177A77;border-bottom: 1rpx solid #177A77;">{{category}}</span>
			<span>个种类）</span>
		</view>
		<!-- 主要原料 -->
		<view class="picking" v-for="(item,index) in material" :key="index">
			<view class="pickingTitles" style="margin-bottom: 20rpx;">
				<view class="flex">
					<span>主要原料：</span>
					<span style="color: #999999 ;">{{item.productName}}</span>
				</view>
				<image @click="handeleAddMaterials(index,index1)" style="width: 34rpx;height: 34rpx;"
					src="/static/work/cg_add03.png" mode=""></image>
			</view>
			<!-- 	<view class="pickingTitle">
				<view class="flex" style="width: 250rpx;">
					<view>数量：</view>
					<view>2000kg</view>
				</view>
				<view class="flex" style="width: 300rpx;">
					<view>已领数量：</view>
					<view>2000kg</view>
				</view>
				<view class="flex" style="width: 300rpx;">
					<view>剩余可领：</view>
					<view>2000kg</view>
				</view>
			</view> -->
			<view class="selectBlock" v-for="(item1,index1) in item.batchList" :key="index1">
				<view class="select" @click="handeleShow(index,index1)">
					<view v-if="item1.batchNumber" class="lib">{{item1.batchNumber}}</view>
					<view style="color: #999999;" v-else>选批次</view>
					<image style="width: 16rpx;height: 16rpx;" src="/static/work/cg_fl_02.png" mode="" />
				</view>
				<view class="select">
					<view class="lib" style="color: #999999 ;">{{item1.wareHouseName || '暂无'}}</view>
				</view>
				<view class="selectActive">
					<input type="number" style="font-size: 24rpx;display: flex;align-items: center;"
						v-model="item1.count" placeholder-style="font-size:24rpx;" placeholder="请输入数量">
					<view style="font-size: 24rpx;">{{item.unitName}}</view>
				</view>
				<view class="selectImage" v-if="item.batchList.length>1" @click="handeleRemoveMaterials(index,index1)">
					<image style="width: 34rpx;height: 34rpx;" src="/static/work/cg_add04.png" mode="" />
				</view>
			</view>
		</view>

		<view class="submit">
			<u-button :loading='loading' :custom-style="customStyleBtn1" @click="submit">确认领料</u-button>
		</view>

		<!-- 批次 -->
		<!-- <u-picker :show="show" :columns="columns" keyName="label" @confirm="handelConfirmPC" @cancel="show=false"></u-picker> -->
		<u-popup :show="show" mode="bottom" @close="show = false" @open="open" round='25rpx'>
			<view class="up-1">
				<view class="up-2">
					<view style="color: #999999;" @click="handleNewClus">取消</view>
					<view style="color: #1C79B1;" @click="handelConfirmPC">确定</view>
				</view>
				<view class="up-3">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
						<view :class="itemIndex==index?'up-4-active':'up-4'" v-for="(item,index) in columns"
							:key="index" @click="handleItemsIndex(index)">
							<view>
								<view>批次号：{{item.label}}</view>
								<view>库位：{{item.wareHouseName}}</view>
								<view>库存：{{item.count}}</view>
							</view>
							<view v-if="itemIndex==index">
								<image style="width: 40rpx;height: 40rpx;" src="/static/work/yes_o.png" mode=""></image>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		setTimes
	} from '@/utils/common.js'
	import {
		productionOrderDetail,
		getProductionInProductInfo,
		getProductStockInfo,
		createProductionOut
	} from '@/api/store.js'
	export default {
		data() {
			return {
				scrollTop: 0,
				label: 'label',
				disabled: true, //按钮
				loading: false, //按钮
				columns: [], //批次
				show: false,
				customStyleBtn1: {
					width: '690rpx',
					height: '90rpx',
					borderRadius: '45rpx',
					background: "linear-gradient(0deg, #177A77, #4B9C6D)",
					fontSize: '28rpx',
					fontWeight: 400,
					color: '#ffffff',
					border: 'none'
				},
				batchList: [ //批次  库位  数量
					{
						batchNumber: '',
						wareHouseName: '',
						wareHouseId: '',
						count: null
					}
				],
				list: {}, //生产单详情
				material: [], //待入库商品
				category: 0,
				batchIndex: 0,
				batchIndex1: 0,
				index: 0,
				index1: 0,
				columnsA: [

				],
				itemIndex: 99999
			}
		},
		onLoad(options) {
			options.id && this.getDetail(options.id)
			options.id && this.getProducts(options.id)

		},
		methods: {
			// 获取领料信息
			async getProducts(id) {
				let res = await getProductStockInfo({
					id
				})
				let mat = res.data
				let a = mat.filter(item => item.stockBatchInfoList)
				console.log('a:', a);
				let b = a.map(item => {
					return {
						...item,
						batchList: [{
							batchNumber: '',
							wareHouseName: '',
							wareHouseId: '',
							productId: item.productId,
							count: null
						}]
					}
				})
				this.category = b.length
				let mergedArray = b.map(obj => obj.stockBatchInfoList).reduce((acc, curr) => acc.concat(curr), []);
				// let pc = mergedArray.map(item => {
				// 	return {
				// 		...item,
				// 		label: item.batchNumber,
				// 		wareHouseName: item.wareHouseName,
				// 		count: item.count
				// 	}
				// })

				// this.columns = pc

				this.material = b
			},
			handleItemsIndex(index) {
				this.itemIndex = index
				// this.material[this.index].batchList[this.index1].batchNumber= this.columns[index].batchNumber
				// this.material[this.index].batchList[this.index1].wareHouseName= this.columns[index].wareHouseName
				// this.material[this.index].batchList[this.index1].wareHouseId=this.columns[index].wareHouseId
				// this.show = false
			},
			// 获取详情信息
			async getDetail(id) {
				let res = await productionOrderDetail({
					id
				})
				this.list = res.data
			},
			// 确认领料
			async submit() {
				let data = {
					productionOrderId: this.list.id,
					productionOutItemsSaveReqVOList: this.material.map(item => item.batchList).flat().map(t => {
						return {
							batchNumber: t.batchNumber,
							count: t.count,
							productId: t.productId,
							warehouseId: t.wareHouseId
						}
					})
				}
				let res = await createProductionOut(data)
				 uni.showToast({
					title: '操作成功',
					icon: 'none'
				})
				setTimeout(()=>{
					uni.navigateBack()
				},1500)
			},
			// 批次确定
			handelConfirmPC() {
				if (this.itemIndex != 99999) {
					this.material[this.index].batchList[this.index1].batchNumber = this.columns[this.itemIndex].batchNumber
					this.material[this.index].batchList[this.index1].wareHouseName = this.columns[this.itemIndex]
						.wareHouseName
					this.material[this.index].batchList[this.index1].wareHouseId = this.columns[this.itemIndex].wareHouseId
					this.show = false
					setTimeout(() => {
						this.itemIndex = 99999
					}, 500)
				} else {
					this.show = false
				}
			},
			handleNewClus() {
				this.show = false
				this.itemIndex = 99999
			},
			// 选择主仓库，或辅料仓库
			handeleLibrary(index, hostIndex) {
				this.index = index
				this.hostIndex = hostIndex
				this.libraryShow = true
			},

			// 点击批次弹窗
			handeleShow(index, index1) {
				
				// if (this.columns.length > 0) {
				// 	this.show = true
				// } else {
				// 	uni.showToast({
				// 		title: '暂无批次',
				// 		icon: 'none'
				// 	})
				// }
				// let pc = mergedArray.map(item => {
				// 	return {
				// 		...item,
				// 		label: item.batchNumber,
				// 		wareHouseName: item.wareHouseName,
				// 		count: item.count
				// 	}
				// })
				
				// this.columns = pc
				if(this.material[index].stockBatchInfoList!=null){
					this.index = index
					this.index1 = index1
					let pc = this.material[index].stockBatchInfoList.map(item=>{
						return{
							...item,
							label: item.batchNumber,
							wareHouseName: item.wareHouseName,
							count: item.count
						}
					})
					this.columns = pc
					this.show = true
				}else{
					uni.showToast({
						title:'暂无批次',
						icon:'none'
					})
				}

			},
			// 增加主原料
			handeleAddMaterials(index, index1) {
				this.material[index].batchList.push({
					batchNumber: '',
					wareHouseName: '',
					wareHouseId: '',
					count: null
				})

			},
			// 删除主原料
			handeleRemoveMaterials(index, index1) {
				uni.showModal({
					title: '提示',
					content: '确认删除此条信息？',
					success: res => {
						if (res.confirm) {
							this.material[index].batchList.splice(index1, 1)
						}
					}
				});
			},

			// 时间戳转换
			handleSetTime(items) {
				return setTimes(items)
			}
		}
	}
</script>

<style scoped>
	.up-4-active {
		width: 100%;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		border-bottom: 1rpx solid #cccccc;
		color: #177A77;

	}

	.up-4 {
		width: 100%;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		border-bottom: 1rpx solid #cccccc;
	}

	.scroll-Y {
		width: 100%;
		height: 600rpx;
	}

	.up-3 {
		width: 90%;
		height: 600;
	}

	.up-2 {
		width: 80%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.up-1 {
		width: 100%;
		height: 700rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.lib {
		width: 140rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
	}

	.submit {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 40rpx 0rpx;
	}

	.selectImage {
		width: 58rpx;
		height: 58rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.selectBlock {
		width: 100%;
		/* min-height: 100rpx; */
		/* background-color: aquamarine; */
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 18rpx;
	}

	.select {
		flex: 1;
		height: 60rpx;
		border: 1px solid #EBEBEB;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-right: 19rpx;
		padding: 0rpx 21rpx;
		box-sizing: border-box;
		font-size: 24rpx;
	}

	.selectActive {
		flex: 1;
		height: 60rpx;
		border: 1px solid #EBEBEB;
		display: flex;
		align-items: center;
		padding: 0 21rpx;
		box-sizing: border-box;
	}

	.pickingTitles {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.pickingTitle {
		font-size: 24rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
	}

	.picking {
		width: 750rpx;
		/* height: 50vh; */
		background-color: #FFFFFF;
		padding: 21rpx 30rpx 21rpx 30rpx;
		box-sizing: border-box;
	}

	.pickingActive {
		width: 750rpx;
		min-height: 200rpx;
		background-color: #FFFFFF;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.block {
		width: 696rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.content {
		width: 749rpx;
		min-height: 509rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 27rpx;
		box-sizing: border-box;

	}

	.foundation {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		padding: 0 0 0 38rpx;
		box-sizing: border-box;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
	}

	.container {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F8F8F8;
	}
</style>